{% include "header.html" %}
  
  <!-- End Header and Nav -->
  
  
  <!-- Page Name -->
  <div id="page-name">
	  <div class="row">
	    <div class="twelve columns">
	      <h1>Quiz</h1>
	    </div>
	  </div>
  </div>
  
  
  <!-- Main Page Content and Sidebar -->

  <div class="row">

    <!-- Page Details -->
    <section class="eight columns">

      <article class="post">
	      
	      <div class="row">

	      	<p>Olá <span class="red">{{ request.user.first_name }}</span>, você tem {{ new_quizes.count }} quiz(es) para responder.</p>
              {% for quiz in new_quizes %}
                  <div class="twelve columns box-quiz laranja">
                      <h2 class="left">{{ quiz.title }}</h2>
                      <div class="more right">
                          <a class="has-tip tip-left" title="{{ quiz.created_date }}" href="#" ><i class="general foundicon-calendar"></i></a>
                          <a class="has-tip tip-top" title="{{ quiz.question_set.count }}" href="#"><i class="access foundicon-question"></i></a>
                          <a href="{% url WebSite.views.quizPerguntas quiz.id %}">Iniciar Quiz <i class="general foundicon-right-arrow"></i></a>
                      </div>
                  </div>
              {% endfor %}

		      <p>Quizzes respondidos:</p>
              {% for helper in paginated_answered_quizes.object_list %}
                  <div class="twelve columns box-quiz azul">
                      <h2 class="left"><a href="#">{{ helper.quiz.title }}</a></h2>
                      <div class="more right">
                          <a class="has-tip tip-top" title="{{ helper.quiz.created_date }}" href="#"><i class="general foundicon-calendar"></i></a>
                          <a class="has-tip tip-top" title="{{ helper.quiz.question_set.count }}" href="#"><i class="access foundicon-question"></i></a>
                          <a class="has-tip tip-top" title="{{ helper.format_duration }}" href="#"><i class="general foundicon-clock"></i></a>
                          <a class="has-tip tip-top" title="{{ helper.correct_answers }}" href="#"><i class="general foundicon-checkmark"></i></a>
                          <a class="has-tip tip-top" title="{{ helper.points }}" href="#"><i class="general foundicon-star"></i></a>
                      </div>
                  </div>
              {% endfor %}

		      <div class="twelve columns">
			      <div class="pagination quiz pagination-centered">
			      	<ul>
                        {% if paginated_answered_quizes.number > 1 %}
			        	    <li><a href="{% url WebSite.views.quizPainel %}?page=1">«</a></li>
                        {% else %}
                            <li class="disabled"><a href="#">«</a></li>
                        {% endif %}
                        {% if paginated_answered_quizes.has_previous %}
                            <li><a href="{% url WebSite.views.quizPainel %}?page={{ previous_page }}">{{ previous_page }}</a></li>
                        {% endif %}
                        <li class="active"><a href="#">{{ paginated_answered_quizes.number }}</a></li>
                        {% if paginated_answered_quizes.has_next %}
                            <li><a href="{% url WebSite.views.quizPainel %}?page={{ next_page }}">{{ next_page }}</a></li>
                        {% endif %}
                        {% if paginated_answered_quizes.number < paginated_answered_quizes.paginator.num_pages %}
                            <li><a href="{% url WebSite.views.quizPainel %}?page={{ paginated_answered_quizes.paginator.num_pages }}">»</a></li>
                        {% else %}
                            <li class="disabled" ><a href="#">»</a></li>
                        {% endif %}
			        </ul>
			      </div>
		      </div>
	      
	      </div>
	      
      </article>

    </section>

    <!-- End Contact Details -->


    <!-- Sidebar -->
    
    <aside class="four columns">
	    
	    <div class="side-box quiz perfil">
	    	<div class="titulo">
	    		<i class="access foundicon-adult"></i>
	    		<h5>{{ request.user.first_name }}</h5>
	    	</div>
	    	<div class="desc">
		    	<p>Quizzes respondidos / Perguntas / Acertos / Pontos</p>
		    	<span><i class="general foundicon-page"></i>{{ answered_quizes.count }}</span>
		    	<span><i class="access foundicon-question"></i>{{ questions_count }}</span>
		    	<span><i class="general foundicon-checkmark"></i>{{ corrected_answers_count }}</span>
                <span><i class="general foundicon-star"></i>{{ total_points }}</span>
	    	</div>
	    	<div class="desc">
		    	<p>Tempo total</p>
		    	<span><i class="general foundicon-clock"></i>{{ total_time }}</span>
                <a href="{% url WebSite.views.logoutView %}">Deslogar</a>
	    	</div>
	    </div>
	    
	    <div class="side-box quiz ranking">
	    	<div class="titulo">
	    		<i class="general foundicon-star"></i>
	    		<h5>Ranking</h5>
	    	</div>
	    	<div class="desc">
	    		<ul>
                    {% for profile in ranking_users %}
                    <li>
                        {{ forloop.counter }} - <span class="red">{{ profile.user.first_name }}</span>
                        <span><i class="general foundicon-star"></i>{{ profile.pointsQuiz }}</span>
                        <span><i class="general foundicon-page"></i>{{ profile.valueQuiz }}</span>
                        <span><i class="access foundicon-question"></i>{{ profile.reponseQuiz }}</span>
                        <span><i class="general foundicon-checkmark"></i>{{ profile.valueCorrect }}</span>
		    		</li>
                    {% endfor %}
	    		</ul>
	    	</div>

	    </div>
    
    </aside>

    <!-- End Sidebar -->
  </div>
    <!-- Included JS Files (Compressed) -->
    <script src="{{ MEDIA_URL }}javascripts/jquery.js"></script>

    <!-- Initialize JS Plugins -->
    <script src="{{ MEDIA_URL }}javascripts/app.js"></script>

    <script type="text/javascript">
        $('#slider').orbit({
            animation: 'horizontal-push',                  // fade, horizontal-slide, vertical-slide, horizontal-push
            animationSpeed: 800,                // how fast animtions are
            timer: false, 			 // true or false to have the timer
            resetTimerOnClick: false,           // true resets the timer instead of pausing slideshow progress
            advanceSpeed: 4000, 		 // if timer is enabled, time between transitions
            pauseOnHover: true, 		 // if you hover pauses the slider
            startClockOnMouseOut: false, 	 // if clock should start on MouseOut
            startClockOnMouseOutAfter: 1000, 	 // how long after MouseOut should the timer start again
            directionalNav: false, 		 // manual advancing directional navs
            captions: false, 			 // do you want captions?
            captionAnimation: 'fade', 		 // fade, slideOpen, none
            captionAnimationSpeed: 800, 	 // if so how quickly should they animate in
            bullets: true,			 // true or false to activate the bullet navigation
            bulletThumbs: false,		 // thumbnails for the bullets
            bulletThumbLocation: '',		 // location from this file where thumbs will be
            afterSlideChange: function(){}, 	 // empty function
            fluid: '16x6'                         // or set a aspect ratio for content slides (ex: '4x3')
        });
    </script>
  <!-- Footer -->

  <!-- End Main Content and Sidebar -->
  {% include "footer.html" %}
